<!--
  状态有三种：已经获取了验证码、2个输入框有内容
-->
<template>
  <div class="vote-login">
    <div v-title>{{ title }}</div>

    <img class="page-img" src="./images/login-banner.png" alt="">
    <h1>
      立即加入噢啦网<br />
      可为您支持的队伍再投<span class="c-orange">3</span>票
    </h1>
    <p class="sub-title">开启以废代捐新生活</p>

    <div class="phone bgi-com">
      <input id="telphone" class="tel" type="tel" maxlength="11" placeholder="请输入手机号码" @focus="editTel" @blur="blurTel" @input="validateTel" v-model="phoneNum">

      <span class="qr-code" @click="getQrCode" v-bind:class="{'c-orange': qrStatus}" v-text="smsText"></span>

      <img @click="clearPhone" :class="{'input-delete': true, 'input-delete-show': phoneDeleteStatus}" src="./images/input-delete.png" alt="">
    </div>
    <div class="verify-code bgi-com">
      <input id="qrCode" class="qr-input" type="tel" placeholder="请输入验证码" @focus="focusVerify" @input="validateCode" @blur="checkCode" v-model="paramsCode">

      <img @click="clearVerify" :class="{'input-delete': true, 'input-delete-show': verifyDeleteStatus}" src="./images/input-delete.png" alt="">
    </div>

    <p class="error-info">
      {{ errorInfo }}
    </p>

    <div class="login" @click="login" :class="{'verify-success': loginStatus, 'disabled': isDisabled}">立即投票</div>

    <div class="user-agree">
      <input type="checkbox" v-model="checkboxState" @click="alocked" />
      <span>已阅读并同意</span><router-link to="/user-agree" class="c-orange">《噢啦网用户注册协议》</router-link>
    </div>
  </div>
</template>

<script>
  import { VoteBindAccount, GetVerifyCode, VoteTripleVote, VoteListDate } from '../../../../service/getDate'
  // import { GetVerifyCode } from '../../../../service/getDate'
  import { checkPhone } from '../../../../config/utils'
  import { Toast, Field } from 'mint-ui'
  import countdown from '../../../../config/mixins/countdown'
  import WeixinShareWay from '@/config/weixinShare'

  export default {
    name: 'verify',
    components: {
      [Field.name]: Field
    },
    mixins: [countdown],
    data () {
      return {
        title: '噢啦网',
        token: '',
        voteId: '',
        voteToken: '',
        codeStatus: false,
        qrStatus: false, // 验证码的状态
        codeBtnStatus: false,
        loginStatus: false,
        phoneNum: '',
        infoCode: '',
        paramsCode: '',
        isDisabled: false,
        errorInfo: '',
        // voteListDate: '', // 储存静态投票列表数据
        phoneDeleteStatus: false, // 手机号码删除按钮的状态
        checkboxState: true, // 已阅读并同意按钮，的状态
        verifyDeleteStatus: false // 验证码删除按钮的状态
      }
    },
    created () {
      // 缓存已经填写的手机号码、验证码
      this.phoneNum = localStorage.getItem('phoneNum') || ''
      // console.log('phoneNum', this.phoneNum)
      if (this.phoneNum.length === 11) {
        this.codeStatus = true
      } else {
        this.codeStatus = false
      }

      this.paramsCode = localStorage.getItem('paramsCode') || ''
      // console.log('paramsCode', this.paramsCode)
      if (this.paramsCode.length === 4) {
        this.qrStatus = true
      } else {
        this.qrStatus = false
      }

      // 检测一下是否有缓存，直接可以立即投票
      this.ifCompleteState()

      this.voteListDate = VoteListDate()
      this.voteId = this.$route.query.voteId
      // console.log('this.voteId', this.voteId)
      this.voteToken = localStorage.getItem('voteToken')

      // 微信分享链接
      var shareLink = 'https://www.oolagongyi.com/activities/#/vote-list'
      WeixinShareWay(shareLink)
    },
    methods: {
      clearPhone () {
        this.phoneNum = ''
        localStorage.removeItem('phoneNum')
      },
      clearVerify () {
        this.paramsCode = ''
        localStorage.removeItem('paramsCode')

        this.qrStatus = false
        this.ifCompleteState()
      },
      alocked () {
        this.checkboxState = !this.checkboxState
        // console.log('this.checkboxState', this.checkboxState)
      },
      blurTel (e) {
        const self = this
        // 显示删除按钮
        self.phoneDeleteStatus = false
        localStorage.setItem('phoneNum', e.target.value)
        // 检测一下是否有缓存，直接可以立即投票
        this.ifCompleteState()
        // console.log('this.phoneNum', e.target.value)
      },
      login () {
        const self = this
        if (!this.checkboxState) {
          this.errorInfo = '请先同意《噢啦网用户注册协议》'
          return
        }
        if (self.isDisabled) return

        // console.log('self.phoneNum', self.phoneNum)
        if (!checkPhone(self.phoneNum)) {
          this.codeStatus = false
          this.errorInfo = '请输入正确的手机号码'
          return
        } else {
          this.codeStatus = true
        }
        self.isDisabled = true

        // 在调用接口之前，重新去拿一下数据
        self.voteToken = localStorage.getItem('voteToken')
        this.voteId = this.$route.query.voteId
        VoteBindAccount({
          token: self.voteToken,
          id: self.voteId,
          phone: self.phoneNum,
          verify_code: self.paramsCode
        }).then(res => {
          if (res.code === 0) {
            self.toVoteTripleVote()
          } else {
            Toast(res.message)
          }
          self.isDisabled = false
        })
      },
      // 自动拉票
      toVoteTripleVote () {
        var self = this
        this.voteListDate = VoteListDate()
        // 如果按钮置灰，就不能点击
        VoteTripleVote(self.voteToken, self.voteId).then(res => {
          switch (res.code) {
            case 0:
              self.$router.push({ path: '/vote-success', query: { title: self.voteListDate[self.voteId - 1].subTitle } })
              break
            case 302:
              self.$router.push({ path: '/vote-login', query: { voteId: self.voteId } })
              break
            case 411:
              self.weixinLogin()
              break
            default:
              self.$router.push({ path: '/voted', query: { title: self.voteListDate[self.voteId - 1].subTitle } })
          }
        })
      },
      validateTel (e) {
        const self = this
        self.phoneNum = e.target.value
        if (!self.phoneNum || self.phoneNum.length < 11) {
          // console.log('1')
          return
        }
        if (self.phoneNum.length > 11) {
          self.phoneNum = self.phoneNum.substring(0, 11)
          // console.log('self.phoneNum', self.phoneNum)
          return
        }
        if (checkPhone(self.phoneNum)) {
          self.qrStatus = true
          // console.log('3')
        } else {
          // console.log('4')
          this.errorInfo = '请输入正确的手机号码'
          self.qrStatus = false
        }
      },
      validateCode (e) {
        this.paramsCode = e.target.value

        // 显示删除按钮
        // console.log('this.verifyDeleteStatus', this.verifyDeleteStatus)
        this.verifyDeleteStatus = true
        if (!this.paramsCode || this.paramsCode.length < 4) {
          return
        }
        if (this.paramsCode.length > 4) {
          this.paramsCode = this.paramsCode.substring(0, 4)
          // console.log(this.paramsCode.substring(0, 4))
          return
        }
        // console.log('this.paramsCode', this.paramsCode)
        this.codeStatus = true
        this.qrStatus = true
        this.ifCompleteState()
      },
      // 是否已经完整填写表单
      ifCompleteState () {
        this.loginStatus = this.codeStatus && this.qrStatus ? 1 : 0
        console.log(this.qrStatus, this.loginStatus, this.codeStatus)
      },
      editTel (e) {
        // 显示删除按钮
        this.phoneDeleteStatus = true

        if (e.target.value) {
          this.qrStatus = false
        }
        this.ifCompleteState()
      },
      focusVerify (e) {
        // 显示删除按钮
        this.verifyDeleteStatus = true
      },
      getQrCode () {
        const self = this
        if (!self.isAble) {
          return
        }
        if (!self.qrStatus) {
          this.errorInfo = '请输入手机号码'
          return
        }
        GetVerifyCode(this.phoneNum, 'bind-account').then(res => {
          if (res.code === 0) {
            Toast('短信验证码已发送至您的手机，请注意查收')
            // 测试环境，正式环境请注释
            // --------
            // this.infoCode = res.info.code
            // --------
            // 获取验证码之后，置灰
            self.qrStatus = false
            self.isAble = false
            self.settime()
            // console.log('infoCode', res.info.code)
          } else {
            // console.log('message', res.message)
            Toast(res.message)
          }
        })
      },
      checkCode (e) {
        const codeString = e.target.value
        localStorage.setItem('paramsCode', e.target.value)
        // console.log('this.paramsCode', e.target.value)

        // 隐藏删除按钮
        this.verifyDeleteStatus = false
        if (!codeString || codeString.length < 4) {
          this.qrStatus = false
          this.ifCompleteState()
          return
        }
        this.codeStatus = true
        this.ifCompleteState()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
 @import "../../../../styles/config";
  .vote-login {
    padding: 0 35px;
    min-height: 100vh;
    background-color: #fff;
    text-align: center;

    .error-info {
      color: #EA6777;
      font-size: 12px;
      height: 17px;
      margin: 1rem 0 1.8rem;
    }
    .input-delete {
      display: none;
      width: 17px;
      float: right;
    }
    .input-delete-show {
      display: inline-block;
    }
    .verify-code {
      margin-top: 0.5rem;
      background-image: url('./images/code-icon.png');
      @extend .bgi-com;
    }
    .phone {
      background-image: url('./images/phone-icon.png');
      @extend .bgi-com;

      .input-delete {
        padding-right: 13px;
      }
    }
    .bgi-com {
      font-size: 16px;
      padding: 1.5rem 0 1.5rem 27px;
      background-repeat: no-repeat;
      background-size: 22px 22px;
      background-position: 0 1.3rem;
      border-bottom: 1px solid #E5E5E5;
      overflow: hidden;

      ::-moz-placeholder {
        color: #CBD3DB;
      }
      ::-webkit-input-placeholder {
        color: #CBD3DB;
      }
      ::-webkit-select-placeholder {
        color: #CBD3DB;
      }
      :-ms-input-placeholder {
        color: #CBD3DB;
      }
      input {
        float: left;
        font-size: 16px;
        color: #55575B;
        padding-right: 0;
      }
      .tel {
        width: 47%;
      }
      .qr-code {
        float: right;
        width: 81px;
        color: #CBD3DB;
        height: 18px;
        line-height: 18px;
        padding-left: 19px;
        border-left: 1px solid #CBD3DB;
      }
      .qr-code-hightlight {
        color: #FFB717;
      }
      .c-orange {
        color: #FFB717;
      }
    }
    .user-agree {
      color: #B4BDC6;
      font-size: 13px;
    }
    h1 {
      font-size: 16px;
    }
    .sub-title {
      font-size: 12px;
      color: #B4BDC6;
      margin-bottom: 4.4rem;
    }
    .page-img {
      display: block;
      width: 63%;
      padding-top: 2.6rem;
      margin: 0 auto 1.8rem;
    }
    .login {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 45px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      margin: 0 0 2.5rem;
      background-color: #b4bdc6;
      border-radius: 4px;
    }
    .verify-success {
      background-color: #ffb717;
    }
  }
</style>
